<template>
  <div id="myChart" :style="{width: '400px', height: '300px'}"></div>
</template>


<script>

import {barlist} from "@/api/cmecomon/echarts";
export default {
  name: 'bar',


  data() {
    return {
      chart: null
      // datanames: [],
      // datavalues:[],
    }
  },



  mounted(){

    // 基于准备好的dom，初始化echarts实例
    this.chart = this.$echarts.init(document.getElementById('myChart'));
    this.initChart()

  },

  methods:{
    // 绘制图表
    initChart(){

      //绘制柱状图
      barlist().then(response => {

        // this.datanames = response.names,
        // this.datavalues = response.values,

        this.chart.setOption({
          title: {
            text: '销量统计',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#555555'
            }
          },
          tooltip: {

          },
          xAxis: {
            // data: this.datanames
            data: response.names
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: response.values
          }]
        })
      })
    }

  }
}
</script>
